<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>


      <!--志愿活动数据-->
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
          <el-form-item label="活动名称" prop="activityName">
            <el-input
              v-model="queryParams.activityName"
              placeholder="请输入活动名称"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="活动报名状态" prop="deptId">
            <el-select v-model="queryParams.applyState" placeholder="请选择">
              <el-option
                v-for = "dict in dict.type.activity_apply_state"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select
              v-model="queryParams.state"
              placeholder="活动状态"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.activity_state"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" class="typeface" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" class="typeface" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['zq:volunteer:add']"
              class="typeface"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              class="typeface"
              @click="handleUpdate"
              v-hasPermi="['zq:volunteer:edit']"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              class="typeface"
              @click="handleDelete"
              v-hasPermi="['zq:volunteer:remove']"
            >删除</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="volunteerList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="活动编号" align="center" key="activityId" prop="activityId" v-if="columns[0].visible" />
          <el-table-column label="活动名称" align="center" key="activityName" prop="activityName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
          <el-table-column label="所属部门" align="center" key="deptId" prop="deptName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
          <el-table-column label="所需人数" align="center" key="num" prop="num" v-if="columns[3].visible" :show-overflow-tooltip="true" />
          <el-table-column label="是否可以报名" align="center" key="applyState" prop="applyStateName" v-if="columns[4].visible" width="120"/>
          <el-table-column label="状态" align="center" key="state" prop="state" v-if="columns[5].visible">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-value="1"
                inactive-value="0"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['zq:volunteer:edit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['zq:volunteer:remove']"
              >删除</el-button>
              <el-button
              size="mini"
              type="text"
              icon="el-icon-document"
              @click="handleInfo(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.activityId === undefined" label="活动名称" prop="activityName">
              <el-input v-model="form.activityName" placeholder="请输入活动名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动时间" prop="activityTime">
              <el-input v-model="form.activityTime" placeholder="请输入活动时间" maxlength="60" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动地点" prop="prop">
              <el-input v-model="form.place" placeholder="请输入活动地点" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="需求人数" prop="num">
              <el-input v-model="form.num" placeholder="请输入一共需要多少志愿者" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认志愿服务时长" prop="volunteerTime">
              <el-input v-model="form.volunteerTime" placeholder="默认志愿服务时长" maxlength="20"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item  label="活动奖励" prop="reward">
              <el-input v-model="form.reward" placeholder="参加活动后的奖励" maxlength="60" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动状态">
              <el-radio-group v-model="form.state">
                <el-radio
                  v-for="dict in dict.type.activity_state"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报名状态">
              <el-select v-model="form.applyState" placeholder="请选择">
                <el-option
                  v-for="dict in dict.type.activity_apply_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="form.beginTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="报名开始日期时间"
                default-time="12:00:00">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="截止时间">
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="报名截止日期时间"
                default-time="12:00:00">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="活动内容">
              <editor v-model="form.intro" :min-height="192"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { listVolunteer, getVolunteer, addVolunteer, updateVolunteer, delVolunteer } from "@/api/volunteer/volunteerActivity";
  import { getToken } from "@/utils/auth";
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "Volunteer",
    dicts: ['activity_state','activity_apply_state'],
    components: { Treeselect },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        activityId: undefined,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        //志愿活动表数据
        volunteerList: null,
        // 弹出层标题
        title: "",
        // 部门树选项
        deptOptions: undefined,
        // 是否显示弹出层
        open: false,
        // 部门名称
        deptName: undefined,
        // 日期范围
        dateRange: [],
        // 岗位选项
        postOptions: [],
        // 角色选项
        roleOptions: [],
        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          activityName: undefined,
          state: undefined,
          deptId: undefined,
          applyState: undefined
        },
        // 列信息
        columns: [
          { key: 0, label: `活动编号`, visible: true },
          { key: 1, label: `活动名称`, visible: true },
          { key: 2, label: `所属部门`, visible: true },
          { key: 3, label: `所需人数`, visible: true },
          { key: 4, label: `是否可以报名`, visible: true },
          { key: 5, label: `状态`, visible: true },
          { key: 6, label: `创建时间`, visible: true }
        ]
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.getList();
      this.getTreeselect();
      this.getConfigKey("sys.user.initPassword").then(response => {
        this.initPassword = response.msg;
      });
    },
    methods: {
      /** 查询活动数据列表 */
      getList() {
        this.loading = true;
        listVolunteer(this.queryParams).then(response => {
            this.volunteerList = response.rows;
            console.log(this.volunteerList)
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.deptId = data.id;
        this.getList();
      },
      // 状态修改
      handleStatusChange(row) {
        console.log(row,"row");
        console.log(this.form)
        let text = row.state == 0 ? "停用" : "启用";

        this.$modal.confirm('确认要"' + text + '"【"' + row.activityName + '"】活动吗？').then(function() {
          // this.form.activityId = row.activityId;
          // this.form.state = row.state;
          let form = {
            activityId :row.activityId,
            state :row.state
          }
          console.log(form,"form");
          return updateVolunteer(form);
        }).then(() => {
          this.$modal.msgSuccess(text + "成功");
        }).catch(function() {
          let form = {
            activityId :row.activityId,
            state :row.state
          }
          console.log(form,"form");
          row.state = row.state == 0 ? 1 : 0;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          activityId: undefined,
          deptId: undefined,
          activityName: undefined,
          intro: undefined,
          activityTime: undefined,
          place: undefined,
          num: undefined,
          reward: undefined,
          volunteerTime: undefined,
          applyState: 0,
          state: 0,
          createUserId: undefined,
          beginTime: undefined,
          endTime: undefined,
          remark: undefined,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.activityId);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.getTreeselect();
        // getVolunteer().then(response => {
          this.open = true;
          this.title = "添加志愿活动";
        // });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.getTreeselect();
        const activityId = row.activityId || this.ids;
        getVolunteer(activityId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改志愿活动内容";
        });
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          console.log(this.form,"form");
          if (valid) {
            if (this.form.activityId != undefined) {
              updateVolunteer(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addVolunteer(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const activityIds = row.activityId || this.ids;
        this.$modal.confirm('是否确认删除活动编号为"' + activityIds + '"的数据项？').then(function() {
          return delVolunteer(activityIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 活动详情 */
      handleInfo: function(row){
        const activityId = row.activityId;
        this.$router.push("/zq/volunteer/getInfo/" + activityId);
      }
    }
  };
</script>

<style>
  .typeface{
    font-family: 黑体;
  }
</style>
